<template>
	<view>
		<view class="top">
			<navigator url="/pages/index/index" open-type="switchTab">
				<image class="back" src="/static/images/白色左箭头.png" mode=""></image>
			</navigator>
			<view class="title">应急救援</view>
		</view>
		<!-- 地图 -->
		<view style="margin-top: -240rpx;">
			<uni-card>
				<map></map>
			</uni-card>
		</view>

		<!-- 导航菜单 -->
		<view>
			<uni-card>
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content">
					<view v-if="current === 0" class="cur1">
						<!-- 基础用法，不包含校验规则 -->
						<uni-forms ref="baseForm" :modelValue="baseFormData">
							<uni-forms-item label="位置" required>
								<uni-easyinput v-model="baseFormData.address" placeholder="请输入地址" />
							</uni-forms-item>
							<uni-forms-item label="求助人" required>
								<uni-easyinput v-model="baseFormData.qname" placeholder="请输入求助人姓名" />
							</uni-forms-item>
							<uni-forms-item label="联系方式" required>
								<uni-easyinput v-model="baseFormData.telephone" placeholder="请输入联系方式" />
							</uni-forms-item>
							<uni-forms-item label="车牌" required>
								<uni-easyinput v-model="baseFormData.carNumber" placeholder="请输入车牌号" />
							</uni-forms-item>

							<uni-forms-item label="描述">
								<uni-easyinput type="textarea" v-model="baseFormData.introduce" placeholder="请输入详细描述" />
							</uni-forms-item>
						</uni-forms>
					</view>
					
					<view v-if="current === 1" class="cur1">
						<!-- 基础用法，不包含校验规则 -->
						<uni-forms ref="baseForm" :modelValue="baseFormData">
							<uni-forms-item label="位置" required>
								<uni-easyinput v-model="baseFormData.address" placeholder="请输入地址" />
							</uni-forms-item>
							<uni-forms-item label="求助人" required>
								<uni-easyinput v-model="baseFormData.qname" placeholder="请输入求助人姓名" />
							</uni-forms-item>
							<uni-forms-item label="联系方式" required>
								<uni-easyinput v-model="baseFormData.telephone" placeholder="请输入联系方式" />
							</uni-forms-item>
							<uni-forms-item label="车牌" required>
								<uni-easyinput v-model="baseFormData.carNumber" placeholder="请输入车牌号" />
							</uni-forms-item>
					
							<uni-forms-item label="描述">
								<uni-easyinput type="textarea" v-model="baseFormData.introduce" placeholder="请输入详细描述" />
							</uni-forms-item>
						</uni-forms>
				
					</view>
					
					
					<view v-if="current === 2" class="cur1">
						<!-- 基础用法，不包含校验规则 -->
						<uni-forms ref="baseForm" :modelValue="baseFormData">
							<uni-forms-item label="起点" required>
								<uni-easyinput v-model="baseFormData.Qaddress" placeholder="请输入地址" />
							</uni-forms-item>
							<uni-forms-item label="终点" required>
								<uni-easyinput v-model="baseFormData.Zaddress" placeholder="请输入地址" />
							</uni-forms-item>
							<uni-forms-item label="求助人" required>
								<uni-easyinput v-model="baseFormData.qname" placeholder="请输入求助人姓名" />
							</uni-forms-item>
							<uni-forms-item label="联系方式" required>
								<uni-easyinput v-model="baseFormData.telephone" placeholder="请输入联系方式" />
							</uni-forms-item>
							<uni-forms-item label="车牌" required>
								<uni-easyinput v-model="baseFormData.carNumber" placeholder="请输入车牌号" />
							</uni-forms-item>
							<uni-forms-item label="描述">
								<uni-easyinput type="textarea" v-model="baseFormData.introduce" placeholder="请输入详细描述" />
							</uni-forms-item>
						</uni-forms>
					</view>
					<view>
						<u-button type="primary" shape="circle" color="#ff6128" icon="phone" text="呼叫救援"></u-button>
						<navigator url="/pages/zwj/jiuyuanjilu/jiuyuanjilu">
							<view style="margin-top: 20rpx;font-size: 25rpx; color: #666;">救援记录>></view>
						</navigator>
					</view>
				</view>
				
				
				
			</uni-card>

			<!-- 警务救助 -->
			<view>
				<uni-card title="警务救助">
					<u-grid :border="false">
						<u-grid-item v-for="(item,index) in baseList" :key="index">
							<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></u-icon> -->
				
							<image :src="item.imgSrc"
								:style="{ width: '40rpx', height: '40rpx', marginTop: '20rpx' }"></image>
							<text class="grid-text">{{item.title}}</text>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast"/>
				</uni-card>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseList: [{
						imgSrc: '/static/images/jiaotong.png', 
						title: '交通事故'
					},
					{
						imgSrc: '/static/images/huojing.png',
						title: '火警'
					},
					{
						imgSrc: '/static/images/jijiubao.png',
						title: '急救中心'
					},
					{
						imgSrc: '/static/images/jc.png',
						title: '公安报警'
					}
				],

				baseFormData: {
					Qaddress: '',
					Zaddress: '',
					address: '',
					qname: '',
					telephone: '',
					carNumber: '',
					introduce: ''
				},
				items: ['搭电', '换胎', '拖车'],
				current: 0, //当前选中的tab索引值，从0计数
				activeColor: '#007aff', //选中边框颜色
				styleType: 'text' //样式类型

			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			}

		}
	}
</script>

<style scoped>
	/* 背景图片 */
	.top {
		width: 100%;
		padding-bottom: 120px;
		background: url(../../../static/images/组 8.png);
		background-repeat: no-repeat;
		background-size: cover;
	}
	.top .back {
			position: absolute;
			margin-left: 20px;
			margin-top: 30px;
			width: 15px;
			height: 15px;
			z-index: 2;
		}
	.top .back {
			position: absolute;
			margin-left: 20px;
			margin-top: 30px;
			width: 15px;
			height: 15px;
			z-index: 2;
		}
	.top .title {
		text-align: center;
		font-size: 18px;
		color: #fff;
		line-height: 44px;
		/* 根据实际需要调整 */
		padding-top: 20px;
	}
	
	
	/* 警务救助 */
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	/* 上面背景 */
	/* 	.bg {
		width: 100%;
		height: 300rpx;
		background-color: #5290ff;
		
	} */
	map {
		width: 610rpx;
		height: 400rpx;
	}

	/* 导航栏样式 */

	.uni-common-mt {
		margin-top: 30px;

	}

	.uni-padding-wrap {
		/* width: 750rpx; */
		padding: 0px 30px;
	}

	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-wrap: wrap;
		/* #endif */
		justify-content: center;
		align-items: center;
		height: auto;
		text-align: center;

	}

	.content-text {
		font-size: 25rpx;
		color: #666;
	}

	.cur1 {
		padding: 15px;
		background-color: #fff;
	}
</style>